<template>
  <div>
    <p>vuex的使用</p>
    <p>获取state中的值：{{ $store.state.num }}</p>
    <p>获取state中的值(辅助函数)：{{ num }}</p>
    <p>{{ goodsList[0].name }}</p>
    <p>总金额：{{ totalPrice }}</p>
    <button @click="addNum">点击加一</button>
    <button @click="deNum">点击减一</button>
    <button @click="de">点击减一（辅助函数）</button>
    <p>获取getters中的值：{{ $store.getters.totalPrice }}</p>
    <span>请输入充值金额：</span>
    <input type="text" v-model="money" />
    <button @click="charge('USD')">充值美金</button>
    <button
      @click="
        chargeFn({
          num: money,
          type: 'USD',
        })
      "
    >
      充值美金(辅助函数)
    </button>
    <button @click="charge('CNY')">充值人民币</button>
    <button @click="chargeObj('CNY')">充值人民币(对象风格)</button>
    <p>辅助函数:少按几次按键，将store中的内容映射到组件中。</p>
    <hr />
    <button @click="getPointSync">获取积分(同步)</button>
    <button @click="getPointAsync">获取积分(异步)</button>
    <hr />
    <p>模块boy中的name：{{ JSON.stringify($store.state.boy.name) }}</p>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
    <el-transfer v-model="value" :data="data"></el-transfer>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import { ADD } from "../store/mutation-types";
export default {
  data() {
    const generateData = (_) => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0,
        });
      }
      return data;
    };
    return {
      money: 0,
      userPoint: 0,
      data: generateData(),
      value: [1, 4],
    };
  },
  // computed: mapState({
  //   // 不改名字
  //   num: state => state.num,
  //   // 重命名
  //   goodsListCom: 'goodsList',
  // }),
  computed: {
    // 其他的计算属性正常写在这里
    ...mapState(["num", "goodsList"]),
    ...mapGetters(["totalPrice"]),
  },
  methods: {
    ...mapMutations({
      // 将de映射进组件之后，de就可以当成组件自己的函数使用
      de: "de",
      // 将charge映射到组件中，改名为chargeFn，继续使用
      chargeFn: "charge",
    }),
    charge(type) {
      // 携带参数，payload
      this.$store.commit("charge", {
        num: this.money,
        type: type,
      });
    },
    chargeObj() {
      // 对象风格的提交方式
      this.$store.commit({
        type: "chargeObj",
        num: this.money,
        type1: "CNY",
      });
    },
    addNum() {
      this.$store.commit(ADD);
    },
    deNum() {
      this.$store.commit("de");
    },
    getPointSync() {
      // 不使用action的示例代码
      this.$http
        .get("/getuserpoint")
        .then((res) => {
          // 进入then之后，就是同步代码了
          this.userPoint = res.data.point;
          this.$store.commit("setPoint", this.userPoint);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getPointAsync() {
      // 使用action的示例代码
      this.$store.dispatch("getPoint");
    },
  },
};
</script>

<style>
</style>